<template>
	<div class="view">
        <div class="container">
            <div class="swiper-container banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="/static/images/banner.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="/static/images/banner.jpg" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="kouhao"><img src="/static/images/index_kouhao.jpg" alt=""></div>
            <div class="category bb">
                <ul class="col-4">
                    <li>
                        <a href="">
                            <img src="/static/images/class_1.png"  alt="">
                            <p>零食</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="/static/images/class_2.png"  alt="">
                            <p>美妆</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="/static/images/class_3.png"  alt="">
                            <p>服饰</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="/static/images/class_4.png"  alt="">
                            <p>玩具</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="index-hot">
                <div class="tit"><span>特价爆款</span></div>               
                <ul>
                    <li class="item">
                        <a class="item-link" href="">
                            <img src="/static/images/p1.jpg"  alt="">
                         	<div class="intro">
                         		<div class="content">
                         			<h3>
                         				<img src="/static/images/p6.jpg" alt="">
                         				<span>无印良品 棉花品 棉品 棉糖</span>
                         			</h3>
                         			<p>小心翼翼地掰下一块，触感非常的柔软，真的很像棉花，比街头小贩卖的棉花糖要细腻绵密的多；塞进</p>
                         		</div>
                         	</div>
                         	<span class="sale">5折</span>
                        </a>
                        <div class="other-info">
	                        <div class="justify">
	                        	<div class="price">
	                        		<span class="sale-price">￥32 </span>
	                        		<span class="del">原价 <del>￥56</del></span>
	                        	</div>
	                        	<div class="origin">产地：日本</div>
	                        </div>
                            <div class="left-time-wrap ended">
                                <!--    把倒计时的时间转成毫秒数给 left_time_int属性   -->
                                还剩<span class="left-time" left_time_int="0"></span>停止销售
                            </div>
                        </div>
                    </li>
                    <li class="item">
                        <a class="item-link" href="">
                            <img src="/static/images/p7.jpg"  alt="">
                         	<div class="intro">
                         		<div class="content">
                         			<h3>
                         				<img src="/static/images/p6.jpg" alt="">
                         				<span>无印良品 棉花品 棉品 棉糖</span>
                         			</h3>
                         			<p>小心翼翼地掰下一块，触感非常的柔软，真的很像棉花，比街头小贩卖的棉花糖要细腻绵密的多；塞进</p>
                         		</div>
                         	</div>
                         	<span class="sale">5折</span>
                        </a>
                        <div class="other-info">
	                        <div class="justify">
	                        	<div class="price">
	                        		<span class="sale-price">￥32 </span>
	                        		<span class="del">原价 <del>￥56</del></span>
	                        	</div>
	                        	<div class="origin">产地：日本</div>
	                        </div>
                            <div class="left-time-wrap ended">
                                <!--    把倒计时的时间转成毫秒数给 left_time_int属性   -->
                                还剩<span class="left-time" left_time_int="1451881"></span>停止销售
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="index-brand">
                <div class="tit"><span>大牌甩货</span></div>
                <div class="slide">
                    <div class="hd">
                        <a href=""> <img src="/static/images/p5.jpg" alt=""></a>
                    </div>
                    <div class="swiper-container">
	                    <div class="swiper-wrapper bd fix">
                            <!--    后台数据循环开始    -->
                            <div class="swiper-slide">
                                <div class="item">
                                    <a href="">
                                        <img src="/static/images/p4.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>超劲道小鱿鱼</p>
                                        <span>￥23</span>
                                    </a>
                                    <!--    如果有折扣在这里加上这个div    -->
                                    <div class="sale">3折</div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <!--    如果商品卖完了这里加上 sold-out样式    -->
                                <div class="item sold-out">
                                    <a href="">
                                        <img src="/static/images/p4.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>超劲道小鱿鱼</p>
                                        <span>￥23</span>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="item">
                                    <a href="">
                                        <img src="/static/images/p4.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>超劲道小鱿鱼</p>
                                        <span>￥23</span>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="item">
                                    <a href="">
                                        <img src="/static/images/p4.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>超劲道小鱿鱼</p>
                                        <span>￥23</span>
                                    </a>
                                </div>
                            </div>
                            <!--    后台数据循环结束    -->
                            <div class="swiper-slide">
                                <a class="more" href="">查看更多 ></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="hd">
                        <a href=""> <img src="/static/images/p8.jpg" alt=""></a>
                    </div>
                    <div class="swiper-container">
	                    <div class="swiper-wrapper bd fix">
	                    	<!--    后台数据循环开始    -->
	                    	<div class="swiper-slide">
	                            <div class="item">
                                    <a href="">
    	                            	<img src="/static/images/p9.jpg" style="width:2.12rem;height:1.55rem" alt="">
    	                            	<p>真皮小提包</p>
    	                            	<span>￥23</span>
                                    </a>
                                    <!--    如果有折扣在这里加上这个div    -->
                                    <div class="sale">3折</div>
	                            </div>
	                        </div>
	                        <div class="swiper-slide">
	                        	<!--    如果商品卖完了这里加上 sold-out样式    -->
	                            <div class="item sold-out">
	                            	<a href="">
                                        <img src="/static/images/p9.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>真皮小提包</p>
                                        <span>￥23</span>
                                    </a>
	                            </div>
	                        </div>
	                        <div class="swiper-slide">
	                            <div class="item">
	                            	<a href="">
                                        <img src="/static/images/p9.jpg" style="width:2.12rem;height:1.55rem" alt="">
                                        <p>真皮小提包</p>
                                        <span>￥23</span>
                                    </a>
	                            </div>
	                        </div>
	                        <div class="swiper-slide">
	                            <div class="item">
                                    <a href="">
    	                            	<img src="/static/images/p9.jpg" style="width:2.12rem;height:1.55rem" alt="">
    	                            	<p>真皮小提包</p>
    	                            	<span>￥23</span>
                                    </a>
	                            </div>
	                        </div>
	                        <!--    后台数据循环结束    -->
	                        <div class="swiper-slide">
	                            <a class="more" href="">查看更多 ></a>
	                        </div>
	                    </div>
                    </div>
                </div>
            </div>
            <router-view></router-view>
        </div>        
    </div> 
</template>

<script>
	export default{
		name:'index',
		data () {
			return {

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
// @import '~../assets/css/app.css';
</style>